<html lang="en">

<head>
  <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>《人人都懂设计模式：从生活中领悟设计模式》---总结(2) - bravo</title>
<link rel="shortcut icon" href="https://JoyZgq.github.io/favicon.ico">
<link href="https://cdn.jsdelivr.net/npm/remixicon@2.2.0/fonts/remixicon.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/animate.css@3.7.2/animate.min.css">
<link rel="stylesheet" href="https://JoyZgq.github.io/media/css/tailwind.css">
<link rel="stylesheet" href="https://JoyZgq.github.io/styles/main.css">
<link rel="alternate" type="application/atom+xml" title="《人人都懂设计模式：从生活中领悟设计模式》---总结(2) - bravo - Atom Feed" href="https://JoyZgq.github.io/atom.xml">


  <script async src="https://www.googletagmanager.com/gtag/js?id=UA-164181119-1"></script>
  <script>
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());
  
    gtag('config', 'UA-164181119-1');
  </script>
    

  <meta name="description" content="过滤器模式（热过滤实验）
什么是过滤器模式？

过滤器模式就是根据某种规则，从一组对象中，过滤掉一些不符合要求的对象的过程。


与职责模式的联系？
  过滤器与责任链的相似之处是处理过程都一环一环地进行，不同之处在于责任链中责任的传递一般..." />
  <meta property="og:title" content="《人人都懂设计模式：从生活中领悟设计模式》---总结(2) - bravo">
  <meta property="og:description" content="过滤器模式（热过滤实验）
什么是过滤器模式？

过滤器模式就是根据某种规则，从一组对象中，过滤掉一些不符合要求的对象的过程。


与职责模式的联系？
  过滤器与责任链的相似之处是处理过程都一环一环地进行，不同之处在于责任链中责任的传递一般..." />
  <meta property="og:type" content="articles">
  <meta property="og:url" content="https://JoyZgq.github.io/post/1HfwLmsNp/" />
  <meta property="og:image" content="https://JoyZgq.github.io/post-images/1HfwLmsNp.webp">
  <meta property="og:image:height" content="630">
  <meta property="og:image:width" content="1200">
  <meta name="twitter:title" content="《人人都懂设计模式：从生活中领悟设计模式》---总结(2) - bravo">
  <meta name="twitter:description" content="过滤器模式（热过滤实验）
什么是过滤器模式？

过滤器模式就是根据某种规则，从一组对象中，过滤掉一些不符合要求的对象的过程。


与职责模式的联系？
  过滤器与责任链的相似之处是处理过程都一环一环地进行，不同之处在于责任链中责任的传递一般...">
  <meta name="twitter:card" content="summary_large_image">
  <link rel="canonical" href="https://JoyZgq.github.io/post/1HfwLmsNp/">

  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/photoswipe@4.1.3/dist/photoswipe.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/photoswipe@4.1.3/dist/default-skin/default-skin.css">
 
  
    <link rel="stylesheet" href="https://JoyZgq.github.io/media/css/prism-github.css">
  

  
</head>

<body>
  <div class="antialiased flex flex-col min-h-screen" id="app">
    <a href="https://JoyZgq.github.io" class="fixed top-0 left-0 mt-4 bg-black text-white dark:text-gray-700 dark:bg-yellow-50 dark:hover:bg-black dark:hover:text-white inline-flex p-2 pl-8 hover:text-gray-700 hover:bg-yellow-50 font-bold z-10 transition-fast animated fadeInLeft">
      bravo
    </a>
    <div class="max-w-4xl w-full mx-auto">
      <div class="shadow-box bg-white dark:bg-gray-600 rounded-lg pt-32 md:pt-64 px-4 md:px-8 pb-8 animated fadeIn mb-8">
        <h1 class="text-5xl font-semibold leading-normal pb-8 mb-8 border-b-8 border-gray-700">
          《人人都懂设计模式：从生活中领悟设计模式》---总结(2)
        </h1>
        
          <img src="https://JoyZgq.github.io/post-images/1HfwLmsNp.webp" alt="《人人都懂设计模式：从生活中领悟设计模式》---总结(2)" class="block w-full mb-8">
        
        <div class="mb-8 flex flex-wrap">
          <div class="text-gray-400 text-sm mr-4">2020-05-06 · 8 min read</div>
          
        </div>
        <div class="markdown mb-8" v-pre>
          <h3 id="过滤器模式热过滤实验">过滤器模式（热过滤实验）</h3>
<h4 id="什么是过滤器模式">什么是过滤器模式？</h4>
<blockquote>
<p>过滤器模式就是根据某种规则，从一组对象中，过滤掉一些不符合要求的对象的过程。</p>
</blockquote>
<ul>
<li>与职责模式的联系？<br>
  过滤器与责任链的相似之处是处理过程都一环一环地进行，不同之处在于责任链中责任的传递一般会有一定的顺序，而过滤器通常没有这种顺序，所以过滤器比责任链简单。当然，过滤器也可以按照职责模式的方式来实现，这时我们认为每一次的过滤都是一种职责（一个任务），而整个过滤流程是一种特殊的链。</li>
</ul>
<h4 id="设计要点">设计要点</h4>
<ul>
<li>三个角色？
<ul>
<li>过滤的目标（Target）：即要被过滤的对象，通常是一个对象数组（对象列表）。</li>
<li>过滤器（Filter）：负责过滤不需要的对象，一般一个规则对应一个类。</li>
<li>过滤器链（FilterChain）：即过滤器的集合，负责管理和维护过滤器，用这个对象进行过滤时，它包含的每一个子过滤器都会进行一次过滤。这个类并不总是必要的，但如果有多个过滤器，有这个类将会带来极大的方便。</li>
</ul>
</li>
<li>优缺点？
<ol>
<li>将对象的过滤、校验逻辑抽离出来，降低系统的复杂度。</li>
<li>过滤规则可实现重复利用。</li>
</ol>
<ul>
<li>性能较低，每个过滤器对每一个元素都会进行遍历。如果有n个元素，m个过滤器，则复杂度为O（mn）。</li>
</ul>
</li>
</ul>
<h4 id="应用场景">应用场景？</h4>
<p>（1）敏感词过滤、舆情监测。（2）需要对对象列表（或数据列表）进行检验、审查或预处理的场景。（3）对网络接口的请求和响应进行拦截，例如对每一个请求和响应记录日志，以便日后分析。</p>
<hr>
<h3 id="对象池技术">对象池技术</h3>
<h4 id="whats-this">what's this?</h4>
<ul>
<li>对象池是一个集合，里面包含了我们需要的已经过初始化且可以使用的对象。我们称这些对象都被池化了，也就是被对象池所管理，想要使用这样的对象，从池子里取一个就行，但是用完得归还。</li>
<li>可以将对象池理解为单例模式的延展—多例模式。对象实例是有限的，要用可以，但用完必须归还，这样其他人才能再使用;</li>
<li><strong><strong>与享元模式的联系？</strong></strong>
<ul>
<li>对象池机制就是享元模式的一个延伸，享元对象的内部状态和属性一经创建不能被随意改变，对象池机制正好可以弥补享元模式的这个缺陷。它通过借、还的机制，让一个对象在某段时间内被一个使用者独占，用完之后归还该对象。在独占的这段时间内使用者可以修改对象的部分属性（因为这段时间内其他用户不能使用这个对象）；而享元模式因为没有这种机制，享元对象在整个生命周期内都是被所有使用者共享的。</li>
</ul>
</li>
</ul>
<h4 id="设计要点-2">设计要点？</h4>
<ul>
<li>核心对象？
<ol>
<li>要进行池化的对象：通常是一些创建和销毁时会非常耗时，或对象本身非常占内存的对象。</li>
<li>对象池（Object Pool）：对象的集合，其实就是对象的管理器，管理对象的借用、归还。</li>
</ol>
</li>
<li>关键动作对象？
<ol>
<li>借用对象（borrow object）：从对象池中获取对象。</li>
<li>使用对象（using object）：即使用对象进行业务逻辑的处理。</li>
<li>归还对象（return、give back）：将对象归还对象池，归还后这个对象的引用不能再用于其他对象，除非重新获取对象。</li>
</ol>
</li>
</ul>
<ul>
<li>优缺点？
<ol>
<li>对象池机制通过借用、归还的思想，实现了对象的重复利用，能有效地节约内存，提升程序性能</li>
</ol>
<ul>
<li>借用和归还必须成对出现，用完必须归还，不然这个对象将一直处于被占用状态。</li>
<li>对已归还的对象的引用，不能再进行任何其他的操作，否则将产生不可预料的结果。</li>
</ul>
</li>
</ul>
<blockquote>
<p>对象池机制的这两个缺点有点类似于C语言中对象内存的分配和释放，程序员必须自己负责内存的申请和释放。同样，对于对象池的对象，程序员要自己负责对象的借用和归还，这给程序员带来了很大的负担。<br>
要解决这个问题，就要使用引用计数技术。引用计数技术的核心思想是，这个对象每多一个使用者（如对象的赋值和传递），引用就自动加1；每少一个使用者（如del一个变量，或退出作用域），引用就自动减1。当引用为1时（只有对象池指向这个对象），自动归还（returnObject）给对象池，这样使用者只需要申请一个对象（borrowObject），而不用关心什么时候归还。<br>
引用计数技术在每一门计算机语言的实现方式中都各不相同，如Java的Commons-pool库中就有SoftReferenceObjectPool类用来解决这个问题</p>
</blockquote>
<h4 id="应用实践">应用实践？</h4>
<ul>
<li>对象池机制特别适用于那些初始化和销毁的代价高且需要经常被实例化的对象，如大对象、需占用I/O的对象等，这些对象在创建和销毁时会非常耗时，以及对象本身非常占内存的对象。如果是简单的对象，对象的创建和销毁都非常迅速，也“不吃”内存；但有些对象，把它进行池化的时间比自己构建还多，这样就不划算了。因为对象池的管理本身也是需要占用资源的，如对象的创建、借用、归还这些都是需要消耗资源的。我们经常听到的（数据库）连接池、线程池用到的都是对象池机制的思想。</li>
<li>Java语言有Apache的commons-pool库，提供了种类多样、功能强大的对象池实现</li>
</ul>
<hr>
<h4 id="回调机制">回调机制</h4>
<blockquote>
<p>把函数作为参数，传递给另一个函数，延迟到另一个函数的某个时刻执行的过程叫回调。</p>
</blockquote>
<ul>
<li>回调函数来自一种著名的编程范式—函数式编程，在函数式编程中可以指定函数作为参数。</li>
<li>模型抽象？
<ul>
<li>面向过程的实现方式</li>
<li>面向对象的实现方式（通过策略模式）</li>
</ul>
</li>
</ul>
<h4 id="设计要点-3">设计要点？</h4>
<pre><code>（1）在支持函数式编程的语言中，可以使用回调函数实现。作为参数传递的函数称为回调函数，接收回调函数（参数）的函数称为高阶函数或包含函数。（2）在只支持面向对象编程的语言中，可以使用策略模式来实现回调机制。
- 优缺点？
    1. 避免重复代码。
    2. 增强代码的可维护性。
    3. 有更多定制的功能。
    - 可能出现“回调地狱”的问题，即多重的回调函数调用
</code></pre>
<h4 id="回调在异步中的应用">回调在异步中的应用？</h4>
<ul>
<li>同步执行</li>
<li>异步执行
<ul>
<li>多线程方式</li>
<li>多任务方式（如JS的异步就是通过基于任务队列的事件循环来实现的）</li>
</ul>
<blockquote>
<p>异步调用经常用在一些比较耗时的任务上，如 I/O 操作、网络请求等。如下载功能就是一项非常耗时的操作（特别是大文件的下载）</p>
</blockquote>
</li>
<li>应用场景？
<ul>
<li>在第三方库和框架中。</li>
<li>异步执行（例如读文件、发送HTTP请求）。</li>
<li>在需要更多通用功能的地方，更好地实现抽象（可处理各种类型的函数）。</li>
</ul>
</li>
</ul>
<hr>
<h3 id="mvc模式">MVC模式</h3>
<blockquote>
<p>MVC模式是软件工程中的一种软件架构模式，把软件系统分为三个基本部分：模型（Model）、视图（View）和控制器（Controller）。</p>
</blockquote>
<ul>
<li>与其他模式之间的联系？
<ul>
<li>中介模式？
<ul>
<li>中介模式通过一个中介对象来封装一系列的对象交互，使多个对象之间不需要显式地相互引用，从而使其耦合松散。MVC模式可以理解成对中介模式的一种延伸，可以将中介模式提升到一个更高的系统架构层次。MVC中的“C”（Controller）就充当着中介的角色，负责把“M”（Model）和“V”（View）隔离开，协调M和V的协同工作。</li>
</ul>
</li>
<li>外观模式？
<ul>
<li>外观模式的核心思想是：用一个简单的接口来封装一个复杂的系统，使这个系统更容易使用，也就是对软件进行分层，不同的层实现不同的功能。而 MVC 模式将这一思想应用到了极致，它将软件拆分成视图层、模型层和控制层。这种拆分方式被广泛应用于现今的很多软件，特别是Web网站。</li>
</ul>
</li>
</ul>
</li>
</ul>
<h3 id="模型抽象">模型抽象</h3>
<ol>
<li>MVC</li>
<li>MVP</li>
<li>MVVM</li>
</ol>

        </div>
        <!-- Share to Twitter, Weibo, Telegram -->
        <div class="flex items-center">
          <div class="mr-4 flex items-center">
            <i class="ri-share-forward-line text-gray-500"></i>
          </div>
          <div class="px-4 cursor-pointer text-blue-500 hover:bg-blue-100 dark:hover:bg-gray-600 inline-flex" @click="shareToTwitter">
            <i class="ri-twitter-line"></i>
          </div>
          <div class="px-4 cursor-pointer text-red-500 hover:bg-red-100 dark:hover:bg-gray-600 inline-flex" @click="shareToWeibo">
            <i class="ri-weibo-line"></i>
          </div>
          <div class="px-4 cursor-pointer text-indigo-500 hover:bg-indigo-100 dark:hover:bg-gray-600 inline-flex" @click="shareToTelegram">
            <i class="ri-telegram-line"></i>
          </div>
        </div>
      </div>

      
        
          <div id="gitalk-container"></div>
        

        
      

      
        <div id="vlaine-comment"></div>
      

      <footer class="py-12 text-center px-4 md:px-0" v-pre>
  Powered by <a href="https://github.com/getgridea/gridea" target="_blank">Gridea</a>  Made by  <a href="https://github.com/JoyZgq" target="_blank">zgq</a> 🎈❤❤❤🌹
</footer>
    </div>

    <!-- TOC Container -->
    <div class="fixed right-0 bottom-0 mb-16 mr-4 shadow w-8 h-8 rounded-full flex justify-center items-center z-10 cursor-pointer bg-white dark:bg-gray-500 dark:text-gray-200 hover:shadow-lg transition-all animated fadeInRight" @click="showToc = true">
      <i class="ri-file-list-line"></i>
    </div>

    <div class="fixed right-0 top-0 bottom-0 overflow-y-auto w-64 bg-white dark:bg-gray-800 p-4 border-l border-gray-100 dark:border-gray-600 z-10 transition-fast" :class="{ '-mr-64': !showToc }">
      <div class="flex mb-4 justify-end">
        <div class="w-8 h-8 inline-flex justify-center items-center rounded-full cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600 transition-fast" @click="showToc = false">
          <i class="ri-close-line text-lg"></i>
        </div>
      </div>
      <div class="post-toc-container">
        <ul class="markdownIt-TOC">
<li>
<ul>
<li>
<ul>
<li><a href="#%E8%BF%87%E6%BB%A4%E5%99%A8%E6%A8%A1%E5%BC%8F%E7%83%AD%E8%BF%87%E6%BB%A4%E5%AE%9E%E9%AA%8C">过滤器模式（热过滤实验）</a>
<ul>
<li><a href="#%E4%BB%80%E4%B9%88%E6%98%AF%E8%BF%87%E6%BB%A4%E5%99%A8%E6%A8%A1%E5%BC%8F">什么是过滤器模式？</a></li>
<li><a href="#%E8%AE%BE%E8%AE%A1%E8%A6%81%E7%82%B9">设计要点</a></li>
<li><a href="#%E5%BA%94%E7%94%A8%E5%9C%BA%E6%99%AF">应用场景？</a></li>
</ul>
</li>
<li><a href="#%E5%AF%B9%E8%B1%A1%E6%B1%A0%E6%8A%80%E6%9C%AF">对象池技术</a>
<ul>
<li><a href="#whats-this">what's this?</a></li>
<li><a href="#%E8%AE%BE%E8%AE%A1%E8%A6%81%E7%82%B9-2">设计要点？</a></li>
<li><a href="#%E5%BA%94%E7%94%A8%E5%AE%9E%E8%B7%B5">应用实践？</a></li>
<li><a href="#%E5%9B%9E%E8%B0%83%E6%9C%BA%E5%88%B6">回调机制</a></li>
<li><a href="#%E8%AE%BE%E8%AE%A1%E8%A6%81%E7%82%B9-3">设计要点？</a></li>
<li><a href="#%E5%9B%9E%E8%B0%83%E5%9C%A8%E5%BC%82%E6%AD%A5%E4%B8%AD%E7%9A%84%E5%BA%94%E7%94%A8">回调在异步中的应用？</a></li>
</ul>
</li>
<li><a href="#mvc%E6%A8%A1%E5%BC%8F">MVC模式</a></li>
<li><a href="#%E6%A8%A1%E5%9E%8B%E6%8A%BD%E8%B1%A1">模型抽象</a></li>
</ul>
</li>
</ul>
</li>
</ul>

      </div>
    </div>

    <!-- Back to top -->
    <div class="fixed right-0 bottom-0 mb-4 mr-4 shadow w-8 h-8 rounded-full flex justify-center items-center z-10 cursor-pointer bg-white hover:shadow-lg transition-all dark:bg-gray-500 dark:text-gray-200" @click="backToUp" v-show="scrolled">
      <i class="ri-arrow-up-line"></i>
    </div>
  </div>

  <!-- Root element of PhotoSwipe. Must have class pswp. -->
<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">
  <!-- Background of PhotoSwipe. 
        It's a separate element as animating opacity is faster than rgba(). -->
  <div class="pswp__bg">
  </div>
  <!-- Slides wrapper with overflow:hidden. -->
  <div class="pswp__scroll-wrap">
    <!-- Container that holds slides. 
            PhotoSwipe keeps only 3 of them in the DOM to save memory.
            Don't modify these 3 pswp__item elements, data is added later on. -->
    <div class="pswp__container">
      <div class="pswp__item">
      </div>
      <div class="pswp__item">
      </div>
      <div class="pswp__item">
      </div>
    </div>
    <!-- Default (PhotoSwipeUI_Default) interface on top of sliding area. Can be changed. -->
    <div class="pswp__ui pswp__ui--hidden">
      <div class="pswp__top-bar">
        <!--  Controls are self-explanatory. Order can be changed. -->
        <div class="pswp__counter">
        </div>
        <button class="pswp__button pswp__button--close" title="Close (Esc)"></button>
        <button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button>
        <button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button>
        <!-- Preloader demo http://codepen.io/dimsemenov/pen/yyBWoR -->
        <!-- element will get class pswp__preloader--active when preloader is running -->
        <div class="pswp__preloader">
          <div class="pswp__preloader__icn">
            <div class="pswp__preloader__cut">
              <div class="pswp__preloader__donut">
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
        <div class="pswp__share-tooltip">
        </div>
      </div>
      <button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)">
      </button>
      <button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)">
      </button>
      <div class="pswp__caption">
        <div class="pswp__caption__center">
        </div>
      </div>
    </div>
  </div>
</div>

  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script src="https://JoyZgq.github.io/media/scripts/main.js"></script>
  
  <!-- Code Highlight -->
  
    <script src="https://JoyZgq.github.io/media/prism.js"></script>
    <script>
      Prism.highlightAll()
    </script>
  

  <script src="https://cdn.jsdelivr.net/npm/photoswipe@4.1.3/dist/photoswipe.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/photoswipe@4.1.3/dist/photoswipe-ui-default.min.js"></script>
  <script>
    //拿到预览框架，也就是上面的html代码
    var pswpElement = document.querySelectorAll('.pswp')[0];
    //定义图片数组变量
    var imgitems;
    /**
    * 用于显示预览界面
    * @param index 图片数组下标
    */
    function viewImg(index) {
      //其它选项这里不做过多阐述，详情见官网
      var pswpoptions = {
        index: parseInt(index, 10), // 开始幻灯片索引。0是第一张幻灯片。必须是整数，而不是字符串。
        bgOpacity: 0.7, // 背景透明度，0-1
        maxSpreadZoom: 3, // 缩放级别，不要太大
      };
      //初始化并打开PhotoSwipe，pswpElement对应上面预览框架，PhotoSwipeUI_Default为皮肤，imgitems为图片数组，pswpoptions为选项
      var gallery = new PhotoSwipe(pswpElement, PhotoSwipeUI_Default, imgitems, pswpoptions);
      gallery.init()
    }
    /**
    * 用于添加图片点击事件
    * @param img 图片元素
    * @param index 所属下标（在imgitems中的位置）
    */
    function addImgClick(img, index) {
      img.onclick = function() {
        viewImg(index)
      }
    }
    /**
    * 轮询所有图片，获取src、width、height等数据，加入imgitems，并给图片元素添加事件
    * 最好在onload中执行该方法，本站因放在最底部，所以直接初始化
    * 异步加载图片可在图片元素创建完成后调用此方法
    */
    function initImg() {
      //重置图片数组
      imgitems = [];
      //查找class:markdown 下的所有img元素并遍历
      var imgs = document.querySelectorAll('.markdown img');
      for (var i = 0; i < imgs.length; i++) {
        var img = imgs[i];
        //本站相册初始为loading图片，真实图片放在data-src
        var ds = img.getAttribute("data-src");
        //创建image对象，用于获取图片宽高
        var imgtemp = new Image();
        //判断是否存在data-src
        if (ds != null && ds.length > 0) {
          imgtemp.src = ds
        } else {
          imgtemp.src = img.src
        }
        //判断是否存在缓存
        if (imgtemp.complete) {
          var imgobj = {
            "src": imgtemp.src,
            "w": imgtemp.width,
            "h": imgtemp.height,
          };
          imgitems[i] = imgobj;
          addImgClick(img, i);
        } else {
          console.log('进来了2')
          imgtemp.index = i;
          imgtemp.img = img;
          imgtemp.onload = function() {
            var imgobj = {
              "src": this.src,
              "w": this.width,
              "h": this.height,
            };
            //不要使用push，因为onload前后顺序会不同
            imgitems[this.index] = imgobj
            //添加点击事件
            addImgClick(this.img, this.index);
          }
        }
      }
    }
    //初始化
    initImg();
  </script>
  
    <script type="application/javascript" src="https://unpkg.com/valine"></script>
<script type="application/javascript">
  new Valine({
    el: '#vlaine-comment',
    appId: 'Sy2gsMvGcPQl3gTGsqqYsHW6-gzGzoHsz',
    appKey: 'IpsgegiMUNgRg7l5BVXk6EXM',
    pageSize: 10,
    notify: false,
    avatar: 'mp',
    verify: true,
    placeholder: '客官来都来了，不妨评论一下🌹🐱‍👤',
    visitor: true,
    highlight: false,
    recordIP: true,
  })
</script>
  
  
    
      <link rel="stylesheet" href="https://unpkg.com/gitalk/dist/gitalk.css">
<script type="application/javascript" src="https://unpkg.com/gitalk/dist/gitalk.min.js"></script>

<script type="application/javascript">

  var gitalk = new Gitalk({
    clientID: '83da62f594c23db993f3',
    clientSecret: '9aa795ad06ecb4133721f1acf047ecb1e4f295e8',
    repo: 'GitalkApp',
    owner: 'JoyZgq',
    admin: ['JoyZgq'],
    id: (location.pathname).substring(0, 49),      // Ensure uniqueness and length less than 50
    distractionFreeMode: false  // Facebook-like distraction free mode
  })

  gitalk.render('gitalk-container')

</script>

    
  
</body>

</html>